<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./font_9l9i7sbpv3j/iconfont.css" />
    <link rel="stylesheet" href="./font_16sg5yyhvmn/iconfont.css" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        background-color: rgb(231, 233, 235);
      }

      .box {
        display: flex;
      }

      .one {
        border-bottom: 1px solid rgb(99, 99, 99);
        line-height: 80px;
        font-size: 25px;
        text-align: center;
      }

      .two {
        margin: auto;
        border-bottom: 1px solid rgb(99, 99, 99);
        line-height: 80px;
        text-align: center;
      }

      .left {
        width: 250px;
        height: 100%;
        background-color: rgb(82, 82, 82);
        color: rgb(255, 255, 255);
      }

      li {
        width: 250px;
        list-style: none;
        line-height: 80px;
        margin: auto;
        text-align: center;
      }

      .db {
        width: 100%;
        height: 80px;
      }

      .right {
        width: 100%;
        height: 100%;
        background-color: rgb(255, 255, 255);
        border-bottom: 1px solid #ccc;
        line-height: 80px;
      }

      li {
        list-style: none;
      }

      .lb li {
        font-weight: bold;
      }

      .H {
        /* margin: 30px 20px; */
        font-size: 20px;
        font-weight: bold;
        line-height: 20px;
        padding-top: 30px;
        margin-left: 20px;
      }

      .tb table {
        margin: 20px 20px;
        width: 100%;
        line-height: 30px;
        text-align: center;
      }

      .tb tr th {
        max-width: 200px;
      }

      .tb table tr th:first-child,
      .tb table tr td:first-child {
        text-align: left;
        line-height: 50px;
      }

      .tb table tr {
        line-height: 30px;
      }
      .icon-shuaxin {
        font-size: 25px;
        color: rgb(106, 254, 0);
      }
      .icon-gouwuche {
        font-size: 25px;
        color: rgb(254, 182, 0);
      }

      .icon-xiajiantou {
        left: 120px;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <!-- 左边区域 -->
      <div class="left">
        <div class="one">AdminLTE 3</div>
        <div class="two">Alexander Pierce</div>
        <ul>
          <li style="background-color: rgb(73, 158, 255); border-radius: 5px">
            Dashoard<span class="iconfont icon-xiajiantou"></span>
          </li>
          <li class="a">Dashoardv1</li>
          <li class="b">Dashoardv2</li>
          <li
            class="c"
            style="
              background-color: rgb(255, 254, 254);
              color: rgb(106, 106, 106);
            "
          >
            Dashoardv3
          </li>
          <li>Wdgets</li>
          <li>Charts</li>
          <li>Ul Elements</li>
          <li>Foms</li>
          <li>Tables</li>
        </ul>
        <ul>
          <li>Calendar</li>
          <li>Mailbox</li>
          <li>Pages</li>
          <li>Extras</li>
        </ul>
      </div>
      <!-- 右边区域 -->
      <div class="db">
        <!-- 顶部区域 -->
        <div class="right">
          <span style="margin-left: 40px">Home</span>
          <span style="margin-left: 40px">COntact</span>
          <input
            type="text"
            placeholder="Search"
            style="margin-left: 40px; padding: 5px; border-radius: 5px"
          />
        </div>
        <div
          style="
            margin-left: 50px;
            line-height: 50px;
            font-size: 25px;
            padding-top: 20px;
          "
        >
          Dashboard v3
        </div>
        <!-- 数据可视化区域 -->
        <div class="keshi" style="display: flex">
          <div
            class="container"
            style="
              width: 700px;
              height: 600px;
              background-color: rgb(255, 255, 255);
              margin: 20px 50px;
              box-shadow: 2px 2px 2px 2px #ccc;
              border-radius: 5px;
            "
          >
            <div>Online Store Visitors</div>
          </div>
          <div
            id="main"
            style="
              width: 700px;
              height: 600px;
              background-color: rgb(255, 255, 255);
              margin: 20px 50px;
              box-shadow: 2px 2px 2px 2px #ccc;
              border-radius: 5px;
            "
          ></div>
        </div>
        <div style="display: flex">
          <div
            class="tb"
            style="
              width: 700px;
              height: 400px;
              background-color: rgb(255, 255, 255);
              margin: 0 50px;
              box-shadow: 2px 2px 2px 2px #ccc;
              border-radius: 5px;
            "
          >
            <p class="H">Products</p>
            <table>
              <thead>
                <tr>
                  <th>Product</th>
                  <th>Price</th>
                  <th>Sales</th>
                  <th>More</th>
                </tr>
              </thead>
              <tbody>
                <!-- <tr >
                        <td >Some Product</td>
                        <td>13 USD</td>
                        <td>12,000Sold</td>
                        <td><span class="iconfont icon-sousuo"></span></td>
                    </tr>
                    <tr>
                        <td >Some Product</td>
                        <td>13 USD</td>
                        <td>12,000Sold</td>
                        <td><span class="iconfont icon-sousuo"></td>
                    </tr> -->
              </tbody>
            </table>
          </div>
          <div
            style="
              width: 700px;
              height: 400px;
              background-color: rgb(255, 255, 255);
              margin: 0 50px;
              box-shadow: 2px 2px 2px 2px #ccc;
              border-radius: 5px;
            "
          >
            <span
              style="
                font-weight: bold;
                font-size: 20px;
                display: block;
                margin: 30px 30px;
              "
              >Online Store Overview</span
            >
            <div
              style="
                width: 600px;
                height: 80px;
                margin: auto;
                border-bottom: 1px solid #ccc;
              "
            >
              <div style="line-height: 35px">
                <div style="display: flex; justify-content: space-between">
                  <span class="iconfont icon-shuaxin"></span>
                  <span>12%</span>
                </div>
                <p style="opacity: 0.3; margin-left: 450px">CONVERSION RATE</p>
              </div>
            </div>

            <div
              style="
                width: 600px;
                height: 80px;
                margin: 80px auto;
                border-bottom: 1px solid #ccc;
              "
            >
              <div style="line-height: 35px">
                <div style="display: flex; justify-content: space-between">
                  <span class="iconfont icon-gouwuche"></span>
                  <span>0.8%</span>
                </div>
                <p style="opacity: 0.3; margin-left: 500px">SALES RATE</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="./promise.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="./图表data.js"></script>

<script>
  var chartDom = document.querySelector(".container");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: {
      //图表的标题
      text: "Online Store Visitors",
      left: "10px",
      size: "25px",
    },
    xAxis: {
      type: "category",
      data: ["10h", "20h", "22h", "24h", "26h", "28h", "30h"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line",
        smooth: true,
      },
      {
        data: [600, 682, 591, 573, 756, 740, 915],
        type: "line",
        smooth: true,
      },
    ],
  };
  option && myChart.setOption(option);

  var chartDom = document.getElementById("main");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: {
      text: "Rainfall vs Evaporation",
      subtext: "Fake Data",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["Rainfall", "Evaporation"],
    },
    toolbox: {
      show: true,
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ["line", "bar"] },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    calculable: true,
    xAxis: [
      {
        type: "category",
        // prettier-ignore
        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',],
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "Rainfall",
        type: "bar",
        data: [5.0, 6.9, 10.0, 9.2, 9.6, 8.7, 10.5],
        markPoint: {
          data: [
            { type: "max", name: "Max" },
            { type: "min", name: "Min" },
          ],
        },
      },
      {
        name: "Evaporation",
        type: "bar",
        data: [4.6, 5.9, 9.0, 8.4, 5.7, 5.0, 8.6],
        markPoint: {
          data: [
            { name: "Max", value: 182.2, xAxis: 7, yAxis: 183 },
            { name: "Min", value: 2.3, xAxis: 11, yAxis: 3 },
          ],
        },
      },
    ],
  };

  option && myChart.setOption(option);

  // 渲染表格
  render(data.list);
  function render(data) {
    var str = data
      .map((item, index) => {
        return `<tr >
                        <td >${item.id}</td>
                        <td>${item.name}</td>
                        <td>${item.number}</td>
                        <td><span class="${item.tubiao}"></span></td>
                    </tr>`;
      })
      .join("");
    document.querySelector("tbody").innerHTML = str;
  }
</script>
